@extends('admin.layout.layout')

@section('content')
<div class="layui-fluid">
  <div class="layui-row layui-col-space10">
    <div class="layui-col-xs6 layui-col-md10">
      <!-- 填充内容 -->
      <div class="layui-card">
        <div class="layui-card-header">
          列表
        </div>
        <div class="layui-card-body">
            <table class="layui-hide" id="datatable"></table>
            <script type="text/html" id="toolbars">
              <div class="layui-btn-container">
                <button class="layui-btn layui-btn-sm">添加栏目</button>
              </div>
            </script>
        </div>
      </div>
    </div>
    <div class="layui-col-xs6 layui-col-md2">
      <div class="layui-card">
        <div class="layui-card-header">目录</div>
        <div class="layui-card-body">
          <ul id="tree" class="ztree" style="overflow:auto;"></ul>
        </div>
      </div>
    </div>
  </div>
</div>
@endsection

@section('css')
<link rel="stylesheet" href="/admin_access/plugins/zTreew/css/metroStyle/metroStyle.css" type="text/css">
@endsection

@section('js')
<script type="text/javascript" src="/admin_access/plugins/zTreew/js/jquery-1.4.4.min.js"></script>
<script type="text/javascript" src="/admin_access/plugins/zTreew/js/jquery.ztree.core.js"></script>
<script type="text/javascript" src="/admin_access/plugins/zTreew/js/jquery.ztree.excheck.js"></script>
<script type="text/javascript" src="/admin_access/plugins/zTreew/js/jquery.ztree.exedit.js"></script>
<SCRIPT type="text/javascript">
  var zNodes = [{!!$tree!!}];
  layui.use(['form','table'],function(){
    var table = layui.table;

    table.render({
      elem: '#datatable'
      ,url: '/admin/get/menu/'
      ,title: '栏目列表'
      ,page: true
      ,toolbar: '#toolbars'
      ,cols: [[
        {type: 'checkbox', fixed: 'left'}
        ,{field: 'id', title: 'ID'}
        ,{field: 'title', title: '栏目标题'}
      ]]
    });
  });
</SCRIPT>
<script type="text/javascript" src="/admin_access/plugins/zTreew/tree.js"></script>

@endsection